<script setup>
import { ref, toRefs, defineExpose } from "vue";
import { useDrawerStore } from "@/store/drawerDataStores.js";
import { message } from "@/utils/message";

const drawerStore = useDrawerStore();
const props = defineProps({
  devVarTableSelectedItem: {
    type: Object,
    default() {
      return {};
    }
  },
  publicForm: {
    type: Object,
    default() {
      return {};
    }
  }
});
const { devVarTableSelectedItem, publicForm } = toRefs(props);
const emit = defineEmits(["childFormObj"]);

const ruleFormRef = ref(),
  ruleFormTop = ref({
    protocolType: undefined, // 协议类型
    protocolAddress: undefined, //协议地址
    protocolNumber: undefined //协议数量
  }),
  ruleFormWifRef = ref(),
  ruleFormLeft = ref({
    wifiAccount: undefined, // WIFI账号
    wifiPassword: undefined, // WIFI密码
    passiveIp: undefined, // 从站ip
    passivePort: undefined //端口号
  }),
  tableData = ref([]);
// 确定按钮
const confirmClick = () => {
  if (
    ruleFormTop.value.protocolType &&
    ruleFormTop.value.protocolAddress &&
    ruleFormTop.value.protocolNumber
  ) {
    // 检查数组中是否已经存在完全相同的对象
    let isDuplicate = tableData.value.some(obj => {
      return (
        obj.protocolType === ruleFormTop.value.protocolType &&
        obj.protocolAddress === ruleFormTop.value.protocolAddress &&
        obj.protocolNumber === ruleFormTop.value.protocolNumber
      );
    });
    if (!isDuplicate) {
      tableData.value.push({
        protocolType: ruleFormTop.value.protocolType,
        protocolAddress: ruleFormTop.value.protocolAddress,
        protocolNumber: ruleFormTop.value.protocolNumber
      });
    }
  }
};
// 删除按钮
const deleteClick = () => {
  if (selectedKey.value.length === 0) {
    message("请选择要删除的数据", { type: "warning" });
    return;
  }
  tableData.value = tableData.value.filter(
    row => !selectedKey.value.includes(row)
  );
  selectedKey.value = [];
};
// table多选事件
const selectedKey = ref([]);
const handleSelectionChange = keys => {
  selectedKey.value = keys;
};
// 配置按钮
// const configClick = () => {
//   ruleFormWifRef.value.validate(valid => {
//     if (valid) {
//       if (selectedKey.value.length > 0) {
//         let formObj = {
//           wifiAccount: ruleFormLeft.value.wifiAccount, //wifi账号
//           wifiPassword: ruleFormLeft.value.wifiPassword, //wifi密码
//           passiveIp: ruleFormLeft.value.passiveIp, //从站地址
//           passivePort: ruleFormLeft.value.passivePort, //从站端口
//           protocolType: selectedKey.value[0].protocolType, // 协议类型
//           protocolAddress: selectedKey.value[0].protocolAddress, //协议地址
//           protocolNumber: selectedKey.value[0].protocolNumber //协议数量
//         };
//         emit("childFormObj", formObj);
//       } else {
//         message("请填写所有的数据", { type: "warning" });
//       }
//     } else {
//       return false;
//     }
//   });
// };
// 配置按钮
const configClick = () => {
  // 定义一个名为 configClick 的箭头函数
  if (
    selectedKey.value.length > 0 &&
    ruleFormLeft.value.wifiAccount &&
    ruleFormLeft.value.wifiPassword &&
    ruleFormLeft.value.passiveIp &&
    ruleFormLeft.value.passivePort
  ) {
    let readInfo = [];
    for (let i = 0; i < tableData.value.length; i++) {
      readInfo.push({
        // 将每一项数据对象推入 readInfo 数组
        type: tableData.value[i].protocolType,
        address: tableData.value[i].protocolAddress,
        num: tableData.value[i].protocolNumber
      });
    }
    let MQTTObj = {
      wifi_name: ruleFormLeft.value.wifiAccount, //WIFI账号
      wifi_password: ruleFormLeft.value.wifiPassword //WIFI密码
    };
    let SQLObj = { ...selectedKey.value[0], ...ruleFormLeft.value };
    let FormObj = {
      MQTTObj: MQTTObj,
      SQLObj: SQLObj
    };
    emit("childFormObj", FormObj); // 触发事件，传递 FormObj 对象作为参数
  } else {
    message("请填写所有的数据", { type: "warning" });
  }
};
// 父组件调用清空函数
const clearVar = () => {
  const storeFormLeft = { ...drawerStore.ruleFormLeft };
  const storeRTUForm = { ...drawerStore.RTUForm };
  ruleFormWifRef.value.resetFields();
  ruleFormRef.value.resetFields();
  drawerStore.ruleFormLeft = { ...storeFormLeft };
  drawerStore.RTUForm = { ...storeRTUForm };
  tableData.value = [];
};
// 父组件调用保存函数
const saveStore = () => {
  drawerStore.ruleFormLeft = { ...ruleFormLeft.value };
  drawerStore.RTUForm = { ...ruleFormTop.value };
  drawerStore.tableData = tableData.value;
};
// 父组件调用赋值函数
const copyStore = () => {
  if (devVarTableSelectedItem.value.state === 1) {
    ruleFormLeft.value = {
      wifiAccount: devVarTableSelectedItem.value.wifiAccount,
      wifiPassword: devVarTableSelectedItem.value.wifiPassword,
      passiveIp: devVarTableSelectedItem.value.passiveIp,
      passivePort: devVarTableSelectedItem.value.passivePort
    };

    ruleFormTop.value = {
      protocolType: devVarTableSelectedItem.value.protocolType,
      protocolAddress: devVarTableSelectedItem.value.protocolAddress,
      protocolNumber: devVarTableSelectedItem.value.protocolNumber
    };

    tableData.value = [
      {
        protocolType: devVarTableSelectedItem.value.protocolType,
        protocolAddress: devVarTableSelectedItem.value.protocolAddress,
        protocolNumber: devVarTableSelectedItem.value.protocolNumber
      }
    ];
  } else {
    ruleFormLeft.value = drawerStore.ruleFormLeft;
    tableData.value = drawerStore.tableData;
    ruleFormTop.value = drawerStore.RTUForm;
  }
};
defineExpose({
  clearVar,
  saveStore,
  copyStore
});
</script>

<template>
  <div class="form-main">
    <el-form
      ref="ruleFormWifRef"
      :inline="false"
      :model="ruleFormLeft"
      label-position="right"
      label-width="auto"
    >
      <el-form-item
        label="WIFI账号"
        prop="wifiAccount"
        :rules="[
          { required: true, message: '请输入WIFI账号', trigger: 'blur' }
        ]"
      >
        <el-input
          v-model="ruleFormLeft.wifiAccount"
          clearable
          placeholder="请输入WIFI账号"
        />
      </el-form-item>
      <el-form-item
        label="WIFI密码"
        prop="wifiPassword"
        :rules="[
          { required: true, message: '请输入WIFI密码', trigger: 'blur' }
        ]"
      >
        <el-input
          v-model="ruleFormLeft.wifiPassword"
          clearable
          placeholder="请输入WIFI密码"
        />
      </el-form-item>
      <el-form-item
        label="从站IP"
        prop="passiveIp"
        :rules="[{ required: true, message: '请输入从站IP', trigger: 'blur' }]"
      >
        <el-input
          v-model="ruleFormLeft.passiveIp"
          clearable
          placeholder="请输入从站IP"
        />
      </el-form-item>
      <el-form-item
        label="端口号"
        prop="passivePort"
        :rules="[{ required: true, message: '请输入端口号', trigger: 'blur' }]"
      >
        <el-input
          v-model="ruleFormLeft.passivePort"
          clearable
          placeholder="请输入端口号"
        />
      </el-form-item>
    </el-form>
    <el-form
      ref="ruleFormRef"
      :model="ruleFormTop"
      :inline="true"
      label-position="top"
    >
      <el-form-item
        label="类型"
        prop="protocolType"
        style="width: 110px; margin-right: 20px"
      >
        <el-select v-model="ruleFormTop.protocolType" placeholder="请选择类型">
          <el-option label="coil" value="coil" />
          <el-option label="register" value="register" />
        </el-select>
      </el-form-item>
      <el-form-item
        label="地址"
        prop="protocolAddress"
        style="width: 110px; margin-right: 20px"
      >
        <el-input
          v-model="ruleFormTop.protocolAddress"
          placeholder="请输入地址"
        />
      </el-form-item>
      <el-form-item
        label="数量"
        prop="protocolNumber"
        style="width: 110px; margin-right: 20px"
      >
        <el-input
          v-model="ruleFormTop.protocolNumber"
          placeholder="请输入数量"
        />
      </el-form-item>
      <el-form-item style="width: 50px">
        <el-button type="primary" class="form-btn" @click="confirmClick"
          >确定</el-button
        >
      </el-form-item>
      <el-form-item style="width: 50px; margin-right: 0px">
        <el-button type="primary" class="form-btn" @click="deleteClick"
          >删除</el-button
        >
      </el-form-item>
    </el-form>
    <div class="form-table">
      <el-table
        ref="multipleTableRef"
        class="custom-table"
        :data="tableData"
        border
        stripe
        max-height="200"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" align="center" />
        <el-table-column prop="protocolType" label="类型" align="center" />
        <el-table-column prop="protocolAddress" label="地址" align="center" />
        <el-table-column prop="protocolNumber" label="数量" align="center" />
      </el-table>
    </div>
    <div class="config-btn">
      <el-button type="primary" @click="configClick">配置</el-button>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.form-btn {
  margin-top: 30px;
}

.form-table {
  padding-bottom: 20px;
}

.config-btn {
  text-align: right;
}
</style>
